<template>
  <div class="EventAnalysis">
    <!-- 登录统计列表 -->
    <el-card style="margin-bottom: 60px">
      <h3>登录统计</h3>
      <div class="loginStatisticsBox">
        <div>
          <h4>今日登录人数</h4>
          <span>{{ date }}</span>
          <p>{{ loginToday }}</p>
        </div>
        <div>
          <h4>近七日登录人数</h4>
          <span>{{ sevenDate }}</span>
          <p>{{ sevenLogin }}</p>
        </div>
        <div>
          <h4>总登录人数</h4>
          <span>{{ date }}</span>
          <p>{{ totalLogin }}</p>
        </div>
      </div>
      <div class="loginStatisticsListBox">
        <div class="loginStatisticsListSearchBox">
          <h3>用户登录次数详情</h3>
          <div>
            <el-date-picker
              v-model="landingStatisticsVal"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptionsA"
              value-format="yyyy-MM-dd"
              @change="focusA"
            >
            </el-date-picker>

            <el-button
              class="btn"
              icon="el-icon-search"
              @click="chartLoginStatisticsBtn"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcel"
              >导出Excel</el-button
            >
          </div>
        </div>
        <el-table :data="tableDataA" v-loading="loadingA" style="width: 100%">
          <el-table-column prop="date" label="时间"> </el-table-column>
          <el-table-column prop="totalNum" label="总计"> </el-table-column>
          <el-table-column prop="phoneYzmNum" label="登录_手机号+验证码登录">
          </el-table-column>
          <el-table-column prop="phoneOneNum" label="登录_本机号码一键登录成功">
          </el-table-column>
          <el-table-column prop="weichatNum" label="登录_微信登录">
          </el-table-column>
          <el-table-column prop="qqNum" label="登录_QQ登录"> </el-table-column>
          <el-table-column prop="avgNum" label="平均登陆次数">
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalA > 0"
          :total="totalA"
          :page.sync="pageA"
          :limit.sync="pageSizeA"
          @pagination="getListA"
        />
      </div>
    </el-card>
    <!-- 匹配统计列表 -->
    <el-card style="margin-bottom: 60px">
      <div class="loginStatisticsListBox">
        <div class="loginStatisticsListSearchBox">
          <h3>匹配统计</h3>
          <div>
            <el-date-picker
              v-model="chartMatchingStatisticsVal"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptionsB"
              value-format="yyyy-MM-dd"
              @change="focusB"
            >
            </el-date-picker>

            <el-button
              class="btn"
              icon="el-icon-search"
              @click="chartMatchingStatisticsBtn"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcelB"
              >导出Excel</el-button
            >
          </div>
        </div>
        <!-- <el-table :data="tableDataB" style="width: 100%">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="outMatchPeoNums" label="付费用户匹配人数(男)">
          </el-table-column>
          <el-table-column prop="outMatchNums" label="付费用户匹配次数(男)">
          </el-table-column>
          <el-table-column
            prop="outMatchPeoSuccNums"
            label="付费用户匹配成功人数(男)"
          >
          </el-table-column>
          <el-table-column
            prop="outMatchTimes"
            label="付费用户匹配总时长(s)(男)"
          >
          </el-table-column>
          <el-table-column
            prop="outMatchAvgTimes"
            label="付费用户匹配平均时长(s)(男)"
          >
          </el-table-column>
          <el-table-column prop="getMatchPeoNums" label="获利用户匹配人数(女)">
          </el-table-column>
          <el-table-column prop="getMatchNums" label="获利用户匹配次数(女)">
          </el-table-column>
          <el-table-column
            prop="getMatchPeoSuccNums"
            label="获利用户匹配成功人数(女)"
          >
          </el-table-column>
          <el-table-column
            prop="getMatchTimes"
            label="获利用户匹配总时长(s)(女)"
          >
          </el-table-column>
          <el-table-column
            prop="getMatchAvgTimes"
            label="获利用户匹配平均时长(s)(女)"
          >
          </el-table-column>
        </el-table> -->
        <div class="p">
          <p :class="{ active: index == '' }" @click="activeStatusA()">不限</p>
          <p :class="{ active: index == 1 }" @click="activeStatusB()">男</p>
          <p :class="{ active: index == 2 }" @click="activeStatusC()">女</p>
        </div>
        <el-table :data="tableDataB" v-loading="loadingB" style="width: 100%">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="MatchPeoNums" label="参与匹配人数">
          </el-table-column>
          <el-table-column prop="MatchNums" label="参与匹配次数">
          </el-table-column>
          <el-table-column prop="MatchPeoSuccNums" label="匹配成功人数">
          </el-table-column>
          <el-table-column prop="MatchSuccNums" label="匹配成功次数">
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalB > 0"
          :total="totalB"
          :page.sync="pageB"
          :limit.sync="pageSizeB"
          @pagination="getListB"
        />
      </div>
    </el-card>

    <!-- 约会统计列表 -->
    <el-card style="margin-bottom: 60px">
      <div class="loginStatisticsListBox">
        <div class="loginStatisticsListSearchBox">
          <h3>约会统计</h3>
          <div>
            <el-date-picker
              v-model="appointmentStatisticsVal"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptionsC"
              value-format="yyyy-MM-dd"
              @change="focusC"
            >
            </el-date-picker>

            <el-button class="btn" icon="el-icon-search" @click="searchC"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcelC"
              >导出Excel</el-button
            >
          </div>
        </div>
        <div class="p">
          <p :class="{ active: indexA == '' }" @click="activeStatusD()">不限</p>
          <p :class="{ active: indexA == 1 }" @click="activeStatusE()">男</p>
          <p :class="{ active: indexA == 2 }" @click="activeStatusF()">女</p>
        </div>
        <el-table :data="tableDataC" v-loading="loadingC" style="width: 100%">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="makePeoSuccNums" label="发布预约人数">
          </el-table-column>
          <el-table-column prop="makeNums" label="发布预约次数">
          </el-table-column>
          <el-table-column prop="makeClickNums" label="邀约次数">
          </el-table-column>
          <el-table-column prop="makeFinishNums" label="邀约完成次数">
          </el-table-column>
          <el-table-column prop="makeFinishPeoNums" label="邀约完成人数">
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalC > 0"
          :total="totalC"
          :page.sync="pageC"
          :limit.sync="pageSizeC"
          @pagination="getListC"
        />
      </div>
    </el-card>

    <!-- 拨打统计列表 -->
    <el-card style="margin-bottom: 60px">
      <div class="loginStatisticsListBox">
        <div class="loginStatisticsListSearchBox">
          <h3>拨打统计</h3>
          <div>
            <el-date-picker
              v-model="chartDialStatisticsVal"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptionsD"
              value-format="yyyy-MM-dd"
              @change="focusD"
            >
            </el-date-picker>

            <el-button
              class="btn"
              icon="el-icon-search"
              @click="chartDialStatisticsBtn"
              >查询搜索</el-button
            >
            <el-button class="btn" icon="el-icon-download" @click="exportExcelD"
              >导出Excel</el-button
            >
          </div>
        </div>
        <div class="p">
          <p :class="{ active: indexB == '' }" @click="activeStatusH()">不限</p>
          <p :class="{ active: indexB == 1 }" @click="activeStatusI()">男</p>
          <p :class="{ active: indexB == 2 }" @click="activeStatusJ()">女</p>
        </div>
        <el-table :data="tableDataD" v-loading="loadingD" style="width: 100%">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="dialPeoSuccNums" label="主动拨打人数">
          </el-table-column>
          <el-table-column prop="dialNums" label="主动拨打次数">
          </el-table-column>
          <el-table-column prop="dialConnectPeoNums" label="主动接通人数">
          </el-table-column>
          <el-table-column prop="dialConnectNums" label="主动接通次数">
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalD > 0"
          :total="totalD"
          :page.sync="pageD"
          :limit.sync="pageSizeD"
          @pagination="getListD"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  chartLoginStatistics,
  chartMatchingStatistics,
  chartAppointmentStatistics,
  chartMateStatistics,
  chartAppointmentNewStatistics,
  chartDialStatistics,
} from "@/api/DataManagement";

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loadingA: true,
      loadingB: true,
      loadingC: true,
      loadingD: true,
      //登陆统计
      date: "", //当日日期
      loginToday: "", //今日登录人数
      sevenDate: "", //七日日期
      sevenLogin: "", //近七日登录人数
      totalLogin: "", //总登录人数
      pickerOptionsA: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      landingStatisticsValStartDate: "", //
      landingStatisticsValEndDate: "", //
      landingStatisticsVal: "", //登陆统计时间日期
      tableDataA: [], //登陆统计
      totalA: 0,
      pageA: 1, //页码
      pageSizeA: 10, //每页条数
      //匹配统计
      pickerOptionsB: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      chartMatchingStatisticsValStartDate: "", //
      chartMatchingStatisticsValEndDate: "", //
      chartMatchingStatisticsVal: "", //时间日期
      tableDataB: [],
      totalB: 0,
      pageB: 1, //页码
      pageSizeB: 10, //每页条数
      //约会统计
      pickerOptionsC: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      chartDialStatisticsValStartDate: "", //
      chartDialStatisticsValEndDate: "", //
      chartDialStatisticsVal: "", //时间日期
      tableDataC: [],
      totalC: 0,
      pageC: 1, //页码
      pageSizeC: 10, //每页条数

      //拨打统计
      pickerOptionsD: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      appointmentStatisticsValStartDate: "", //
      appointmentStatisticsValEndDate: "", //
      appointmentStatisticsVal: "", //时间日期
      tableDataD: [],
      totalD: 0,
      pageD: 1, //页码
      pageSizeD: 10, //每页条数

      index: "",
      indexA: "",
      indexB: "",
    };
  },
  methods: {
    // 导出登陆统计
    exportExcel() {
      chartLoginStatistics({
        startTime: this.landingStatisticsValStartDate,
        endTime: this.landingStatisticsValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "日期",
              "总计",
              "登录_手机号+验证码登录",
              "登录_本机号码一键登录成功",
              "登录_微信登录",
              "登录_QQ登录",
              "平均登陆次数%",
            ]; // 上面设置Excel的表格第一行的标题
            const filterVal = [
              "date",
              "totalNum",
              "phoneYzmNum",
              "phoneOneNum",
              "weichatNum",
              "qqNum",
              "avgNum",
            ]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = res.data.list; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "登陆统计"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出匹配统计
    exportExcelB() {
      chartMateStatistics({
        startTime: this.chartMatchingStatisticsValStartDate,
        endTime: this.chartMatchingStatisticsValEndDate,
        page: this.pageB,
        pageSize: this.pageSizeB,
        sex: this.index,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "日期",
              "参与匹配人数",
              "参与匹配次数",
              "匹配成功人数",
              "匹配成功次数",
            ]; // 上面设置Excel的表格第一行的标题
            const filterVal = [
              "date",
              "MatchPeoNums",
              "MatchNums",
              "MatchPeoSuccNums",
              "MatchSuccNums",
            ]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = res.data.list; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "匹配统计"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出约会统计
    exportExcelC() {
      chartAppointmentNewStatistics({
        startTime: this.appointmentStatisticsValStartDate,
        endTime: this.appointmentStatisticsValEndDate,
        page: this.pageC,
        pageSize: this.pageSizeC,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "日期",
              "发布预约人数",
              "发布预约次数",
              "邀约次数",
              "邀约完成次数",
              "邀约完成人数",
            ]; // 上面设置Excel的表格第一行的标题
            const filterVal = [
              "date",
              "makePeoSuccNums",
              "makeNums",
              "makeClickNums",
              "makeFinishNums",
              "makeFinishPeoNums",
            ]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = res.data.list; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "约会统计"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出拨打统计
    exportExcelD() {
      chartDialStatistics({
        startTime: this.chartDialStatisticsValStartDate,
        endTime: this.chartDialStatisticsValEndDate,
        page: this.pageD,
        pageSize: this.pageSizeD,
        sex: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "日期",
              "主动拨打人数",
              "主动拨打次数",
              "主动接通人数",
              "主动接通次数",
            ]; // 上面设置Excel的表格第一行的标题
            const filterVal = [
              "date",
              "dialPeoSuccNums",
              "dialNums",
              "dialConnectPeoNums",
              "dialConnectNums",
            ]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = res.data.list; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "拨打统计"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //登陆统计
    chartLoginStatistics() {
      this.loadingA = true;
      chartLoginStatistics({
        startTime: "",
        endTime: "",
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = res.data.total;
          this.loginToday = res.data.loginToday;
          this.sevenDate = res.data.sevenDate;
          this.sevenLogin = res.data.sevenLogin;
          this.date = res.data.date;
          this.totalLogin = res.data.totalLogin;
          this.loadingA = false;
        }
      });
    },
    //查询
    chartLoginStatisticsBtn() {
      this.loadingA = true;

      chartLoginStatistics({
        startTime: this.landingStatisticsValStartDate,
        endTime: this.landingStatisticsValEndDate,
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = res.data.total;
          this.loginToday = res.data.loginToday;
          this.sevenDate = res.data.sevenDate;
          this.sevenLogin = res.data.sevenLogin;
          this.date = res.data.date;
          this.totalLogin = res.data.totalLogin;
          this.loadingA = false;
        }
      });
    },
    //登陆时间赋值
    focusA(time) {
      if (!this.landingStatisticsVal) {
        this.landingStatisticsVal = [];
      }
      this.landingStatisticsValStartDate = this.landingStatisticsVal[0];
      this.landingStatisticsValEndDate = this.landingStatisticsVal[1];
    },
    //登陆统计分页
    getListA() {
      this.loadingA = true;

      chartLoginStatistics({
        startTime: this.landingStatisticsValStartDate,
        endTime: this.landingStatisticsValEndDate,
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = res.data.total;
          this.loginToday = res.data.loginToday;
          this.sevenDate = res.data.sevenDate;
          this.sevenLogin = res.data.sevenLogin;
          this.date = res.data.date;
          this.totalLogin = res.data.totalLogin;
          this.loadingA = false;
        }
      });
    },

    //匹配统计
    chartMatchingStatistics() {
      // chartMatchingStatistics({
      //   startTime: "",
      //   endTime: "",
      //   page: this.pageB,
      //   pageSize: this.pageSizeB,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.tableDataB = res.data.list;
      //     this.totalB = res.data.total;
      //   }
      // });
      this.loadingB = true;

      chartMateStatistics({
        startTime: "",
        endTime: "",
        page: this.pageB,
        pageSize: this.pageSizeB,
        sex: this.index,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          this.totalB = res.data.total;
          this.loadingB = false;
        }
      });
    },
    //查询
    chartMatchingStatisticsBtn() {
      // chartMatchingStatistics({
      //   startTime: this.chartMatchingStatisticsValStartDate,
      //   endTime: this.chartMatchingStatisticsValEndDate,
      //   page: this.pageB,
      //   pageSize: this.pageSizeB,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.tableDataB = res.data.list;
      //     this.totalB = res.data.total;
      //   }
      // });
      this.loadingB = true;

      chartMateStatistics({
        startTime: this.chartMatchingStatisticsValStartDate,
        endTime: this.chartMatchingStatisticsValEndDate,
        page: this.pageB,
        pageSize: this.pageSizeB,
        sex: this.index,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          this.totalB = res.data.total;
          this.loadingB = false;
        }
      });
    },
    //匹配统计性别不限
    activeStatusA() {
      this.index = "";
      this.loadingB = true;

      chartMateStatistics({
        startTime: this.chartMatchingStatisticsValStartDate,
        endTime: this.chartMatchingStatisticsValEndDate,
        page: this.pageB,
        pageSize: this.pageSizeB,
        sex: this.index,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          this.totalB = res.data.total;
          this.loadingB = false;
        }
      });
    },
    //匹配统计性别男
    activeStatusB() {
      this.index = 1;
      this.loadingB = true;

      chartMateStatistics({
        startTime: this.chartMatchingStatisticsValStartDate,
        endTime: this.chartMatchingStatisticsValEndDate,
        page: this.pageB,
        pageSize: this.pageSizeB,
        sex: this.index,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          this.totalB = res.data.total;
          this.loadingB = false;
        }
      });
    },
    //匹配统计性别女
    activeStatusC() {
      this.index = 2;
      this.loadingB = true;

      chartMateStatistics({
        startTime: this.chartMatchingStatisticsValStartDate,
        endTime: this.chartMatchingStatisticsValEndDate,
        page: this.pageB,
        pageSize: this.pageSizeB,
        sex: this.index,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          this.totalB = res.data.total;
          this.loadingB = false;
        }
      });
    },
    //匹配统计赋值
    focusB(time) {
      if (!this.chartMatchingStatisticsVal) {
        this.chartMatchingStatisticsVal = [];
      }
      this.chartMatchingStatisticsValStartDate =
        this.chartMatchingStatisticsVal[0];
      this.chartMatchingStatisticsValEndDate =
        this.chartMatchingStatisticsVal[1];
    },
    //匹配统计分页
    getListB() {
      this.loadingB = true;

      chartMatchingStatistics({
        startTime: this.chartMatchingStatisticsValStartDate,
        endTime: this.chartMatchingStatisticsValEndDate,
        page: this.pageB,
        pageSize: this.pageSizeB,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          this.totalB = res.data.total;
          this.loadingB = false;
        }
      });
    },

    //约会统计
    chartAppointmentStatistics() {
      this.loadingC = true;

      chartAppointmentNewStatistics({
        startTime: "",
        endTime: "",
        page: this.pageC,
        pageSize: this.pageSizeC,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataC = res.data.list;
          this.totalC = res.data.total;
          this.loadingC = false;
        }
      });
    },
    //约会统计搜索
    appointmentSearchBtn() {
      this.loadingC = true;

      chartAppointmentNewStatistics({
        startTime: this.appointmentStatisticsValStartDate,
        endTime: this.appointmentStatisticsValEndDate,
        page: this.pageC,
        pageSize: this.pageSizeC,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataC = res.data.list;
          this.totalC = res.data.total;
          this.loadingC = false;
        }
      });
    },
    //约会统计赋值
    focusC(time) {
      if (!this.appointmentStatisticsVal) {
        this.appointmentStatisticsVal = [];
      }
      this.appointmentStatisticsValStartDate = this.appointmentStatisticsVal[0];
      this.appointmentStatisticsValEndDate = this.appointmentStatisticsVal[1];
    },
    // 约会统计分页
    getListC() {
      this.loadingC = true;

      chartAppointmentNewStatistics({
        startTime: this.appointmentStatisticsValStartDate,
        endTime: this.appointmentStatisticsValEndDate,
        page: this.pageC,
        pageSize: this.pageSizeC,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataC = res.data.list;
          this.totalC = res.data.total;
          this.loadingC = false;
        }
      });
    },
    searchC() {
      this.pageC = 1;
      this.getListC();
    },
    //约会统计性别不限
    activeStatusD() {
      this.pageC = 1;
      this.indexA = "";
      this.loadingC = true;
      chartAppointmentNewStatistics({
        startTime: this.appointmentStatisticsValStartDate,
        endTime: this.appointmentStatisticsValEndDate,
        page: this.pageC,
        pageSize: this.pageSizeC,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataC = res.data.list;
          this.totalC = res.data.total;
          this.loadingC = false;
        }
      });
    },
    //约会统计性别男
    activeStatusE() {
      this.pageC = 1;
      this.indexA = 1;
      this.loadingC = true;

      chartAppointmentNewStatistics({
        startTime: this.appointmentStatisticsValStartDate,
        endTime: this.appointmentStatisticsValEndDate,
        page: this.pageC,
        pageSize: this.pageSizeC,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataC = res.data.list;
          this.totalC = res.data.total;
          this.loadingC = false;
        }
      });
    },
    //约会统计性别女
    activeStatusF() {
      this.pageC = 1;
      this.indexA = 2;
      this.loadingC = true;

      chartAppointmentNewStatistics({
        startTime: this.appointmentStatisticsValStartDate,
        endTime: this.appointmentStatisticsValEndDate,
        page: this.pageC,
        pageSize: this.pageSizeC,
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataC = res.data.list;
          this.totalC = res.data.total;
          this.loadingC = false;
        }
      });
    },

    //拨打统计
    chartDialStatistics() {
      this.loadingD = true;

      chartDialStatistics({
        startTime: "",
        endTime: "",
        page: this.pageD,
        pageSize: this.pageSizeD,
        sex: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataD = res.data.list;
          this.totalD = res.data.total;
          this.loadingD = false;
        }
      });
    },
    //拨打统计搜索
    chartDialStatisticsBtn() {
      this.loadingD = true;

      chartDialStatistics({
        startTime: this.chartDialStatisticsValStartDate,
        endTime: this.chartDialStatisticsValEndDate,
        page: this.pageD,
        pageSize: this.pageSizeD,
        sex: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataD = res.data.list;
          this.totalD = res.data.total;
          this.loadingD = false;
        }
      });
    },
    //拨打统计赋值
    focusD(time) {
      if (!this.chartDialStatisticsVal) {
        this.chartDialStatisticsVal = [];
      }
      this.chartDialStatisticsValStartDate = this.chartDialStatisticsVal[0];
      this.chartDialStatisticsValEndDate = this.chartDialStatisticsVal[1];
    },
    // 拨打统计分页
    getListD() {
      this.loadingD = true;

      chartDialStatistics({
        startTime: this.chartDialStatisticsValStartDate,
        endTime: this.chartDialStatisticsValEndDate,
        page: this.pageD,
        pageSize: this.pageSizeD,
        sex: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataD = res.data.list;
          this.totalD = res.data.total;
          this.loadingD = false;
        }
      });
    },
    //拨打统计性别不限
    activeStatusH() {
      this.indexB = "";
      this.loadingD = true;

      chartDialStatistics({
        startTime: this.chartDialStatisticsValStartDate,
        endTime: this.chartDialStatisticsValEndDate,
        page: this.pageD,
        pageSize: this.pageSizeD,
        sex: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataD = res.data.list;
          this.totalD = res.data.total;
          this.loadingD = false;
        }
      });
    },
    //拨打统计性别男
    activeStatusI() {
      this.indexB = 1;
      this.loadingD = true;

      chartDialStatistics({
        startTime: this.chartDialStatisticsValStartDate,
        endTime: this.chartDialStatisticsValEndDate,
        page: this.pageD,
        pageSize: this.pageSizeD,
        sex: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataD = res.data.list;
          this.totalD = res.data.total;
          this.loadingD = false;
        }
      });
    },
    //拨打统计性别女
    activeStatusJ() {
      this.indexB = 2;
      this.loadingD = true;

      chartDialStatistics({
        startTime: this.chartDialStatisticsValStartDate,
        endTime: this.chartDialStatisticsValEndDate,
        page: this.pageD,
        pageSize: this.pageSizeD,
        sex: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataD = res.data.list;
          this.totalD = res.data.total;
          this.loadingD = false;
        }
      });
    },
  },
  created() {
    this.chartLoginStatistics();
    this.chartMatchingStatistics();
    this.chartAppointmentStatistics();
    this.chartDialStatistics();
  },
};
</script>

<style lang="less" scoped>
.EventAnalysis {
  margin: 30px;
  height: 100%;
  .loginStatisticsBox {
    display: flex;
    margin-bottom: 60px;
    div {
      margin-right: 10%;
      box-shadow: 6px 10px 10px #ccc;
      width: 280px;
      height: 150px;
      padding: 20px;
    }
  }
  .loginStatisticsListBox {
    .loginStatisticsListSearchBox {
      display: flex;
      justify-content: space-between;
      .btn {
        margin-left: 20px;
      }
    }
    .p {
      display: flex;
      p {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
    .active {
      background-color: #0079fe;
      color: #fff;
      border-radius: 10px;
    }
  }
}
</style>